<template>
	<view class="boxx">
		<!-- 返回 -->
		<img src="../../static/img/fanhui.png" alt="" class="return">
		<p class="word">注册</p>
		<!-- 昵称 -->
		<div class="name">
			<input type="text" value="" class="name_text" placeholder="请输入你的昵称" v-model="nickname">
		</div>
		<!-- 性别 -->
	<!-- 	<div class="sex">
			<p>你的性别</p>
			<img src="../../static/img/11.png" alt="" class="one">
			<input type="checkbox" name=""/>
			<img src="../../static/img/12.png" alt="" class="one">
			<input type="checkbox" name=""/>
			
		</div> -->
		<!-- 账号 -->
		<div class="id">
			<input type="text" value="" class="id_text" placeholder="请输入你的账号" v-model="username">
		</div>
		<!-- 密码 -->
		<div class="password">
			<input type="password" placeholder="请输入你的密码" class="password_text" v-model="password">
		</div>
		<!-- 身份 -->
	<!-- 	<div class="identity">
			<p>你的身份</p>
			<img src="../../static/img/ls.png" alt="" class="one">
			<input type="checkbox" name=""/>
			<img src="../../static/img/xs.png" alt="" class="one">
			<input type="checkbox" name=""/>
			
		</div> -->
		<!-- 邮箱 -->
		<div class="mailbox">
			<input type="text" value="" class="mailbox_text" placeholder="请输入你的邮箱" v-model="email">
		</div>
		<!-- 底部按钮 -->
		<img src="../../static/img/14.png" alt="" class="lower" @click="register">
		<view class="toggle" >
			<text @click="toLogin">登录-></text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data () {
			return {
				username: "",
				password: "",
				nickname: "",
				email: ""
			}
		},
		methods: {
			toLogin () {
				uni.navigateTo({
					url: "login"
				})
			},
			async register () {
				// this.$store.commit("setUserInfo", {
				// 	username: this.username,
				// 	password: this.password,
				// 	nickname: this.nickname,
				// 	email: this.email
				// })
				
				uni.setStorageSync("userInfo", {
					username: this.username,
						password: this.password,
						nickname: this.nickname,
						email: this.email
				})
				
				let res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "register",
						username: this.username,
						password: this.password,
						nickname: this.nickname,
						email: this.email
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				
				})
				console.log(res)
				res = res[1].data
				
				if (res.msg === "ok") {
					uni.showToast({
						title: "注册成功"
					})
					
					setTimeout(function () {
						uni.navigateTo({
							url: "login"
						})
					}, 1500)
				} else {
					uni.showToast({
						title: "注册失败",
						image: "../../static/img/tubiao8-.png"
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 返回 */
	.return{
	    margin-top: 36rpx;
	    margin-left: 18rpx;
	    width: 54rpx;
	    height: 54rpx;
	}
	
	.word{
	    text-align: center;
	    font-size: 45rpx;
	}
	/* 昵称 */
	.name,.id,.password,.mailbox{
	    margin: 0 auto;
	    margin-top: 45rpx;
	    border-radius: 18rpx;
	    width: 453rpx;
	    height:63rpx;
	    background-color: #FFDA44;
	}
	
	.toggle {
		text-align: right;
		font-size: 32rpx;
		margin-top: 30rpx;
		padding: 20rpx;
	}
	
	/* 文本框 */
	.name_text,.id_text,.password_text,.mailbox_text{
	    margin: 0 auto;
	    width: 399rpx;
	    margin-top: 5rpx;
	    margin-left: 25rpx;
	    font-size: 27rpx;
	    height: 53rpx;
	    background-color: #FFDA44;
	    color: gray;
	    border: 0px;
	}
	.sex p ,.identity p{
	    font-size: 33rpx;
	    margin-top:45rpx;
	    margin-left: 145rpx;
	}
	.one{
	    margin-top: 36rpx;
	    margin-left: 145rpx;
	    width: 54rpx;
	    height: 54rpx;
	}
	/* 底部图片 */
	.lower{
	    display: block;
	    margin:  0 auto;
	    margin-top: 181rpx;
	    width: 109rpx;
	    height: 109rpx;
	}
</style>
